
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带变形动画特效的下拉导航菜单特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
</head>
<body>
<!-- <div class="htmleaf-header">
    <h1>带变形动画特效的下拉导航菜单特效 <span>Stripe.Com Navigation</span></h1>
    <div class="htmleaf-links">
        <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
        <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201610144104.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
    </div>
</div> -->
<header class="cd-morph-dropdown">
    <a href="#0" class="nav-trigger">Open Nav<span aria-hidden="true"></span></a>

    <nav class="main-nav">
        <ul>
            <li class="has-dropdown gallery" data-content="about">
                <a href="#0">About</a>
            </li>

            <li class="has-dropdown links" data-content="pricing">
                <a href="#0">Pricing</a>
            </li>

            <li class="has-dropdown button" data-content="contact">
                <a href="#0">Contact</a>
            </li>
        </ul>
    </nav>

    <div class="morph-dropdown-wrapper">
        <div class="dropdown-list">
            <ul>
                <li id="about" class="dropdown gallery">
                    <a href="#0" class="label">About</a>

                    <div class="content">
                        <ul>
                            <li>
                                <a href="#0">
                                    <em>Title here</em>
                                    <span>A brief description here</span>
                                </a>
                            </li>

                            <li>
                                <a href="#0">
                                    <em>Title here</em>
                                    <span>A brief description here</span>
                                </a>
                            </li>

                            <li>
                                <a href="#0">
                                    <em>Title here</em>
                                    <span>A brief description here</span>
                                </a>
                            </li>

                            <li>
                                <a href="#0">
                                    <em>Title here</em>
                                    <span>A brief description here</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li id="pricing" class="dropdown links">
                    <a href="#0" class="label">Pricing</a>

                    <div class="content">
                        <ul>
                            <li>
                                <h2>Services</h2>

                                <ul class="links-list">
                                    <li><a href="#0">Logo Design</a></li>
                                    <li><a href="#0">Branding</a></li>
                                    <li><a href="#0">Web Design</a></li>
                                    <li><a href="#0">iOS</a></li>
                                    <li><a href="#0">Android</a></li>
                                    <li><a href="#0">HTML/CSS/JS</a></li>
                                    <li><a href="#0">Packaging</a></li>
                                    <li><a href="#0">Mobile</a></li>
                                    <li><a href="#0">UI/UX</a></li>
                                    <li><a href="#0">Prototyping</a></li>
                                </ul>
                            </li>

                            <li>
                                <h2>Projects</h2>

                                <ul class="links-list">
                                    <li><a href="#0">Logo Design</a></li>
                                    <li><a href="#0">Branding</a></li>
                                    <li><a href="#0">Web Design</a></li>
                                    <li><a href="#0">iOS</a></li>
                                    <li><a href="#0">Android</a></li>
                                    <li><a href="#0">HTML/CSS/JS</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>

                <li id="contact" class="dropdown button">
                    <a href="#0" class="label">Contact</a>

                    <div class="content">
                        <ul class="links-list">
                            <li><a href="#0">Link #1</a></li>
                            <li><a href="#0">Link #2</a></li>
                            <li><a href="#0">Link #3</a></li>
                            <li><a href="#0">Link #4</a></li>
                            <li><a href="#0">Link #5</a></li>
                            <li><a href="#0">Link #6</a></li>
                        </ul>

                        <a href="#0" class="btn">Get in Touch</a>
                    </div>
                </li>
            </ul>

            <div class="bg-layer" aria-hidden="true"></div>
        </div> <!-- dropdown-list -->
    </div> <!-- morph-dropdown-wrapper -->
</header>
<main class="cd-main-content">

</main>

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script>
    jQuery(document).ready(function($){
        function morphDropdown( element ) {
            this.element = element;
            this.mainNavigation = this.element.find('.main-nav');
            this.mainNavigationItems = this.mainNavigation.find('.has-dropdown');
            this.dropdownList = this.element.find('.dropdown-list');
            this.dropdownWrappers = this.dropdownList.find('.dropdown');
            this.dropdownItems = this.dropdownList.find('.content');
            this.dropdownBg = this.dropdownList.find('.bg-layer');
            this.mq = this.checkMq();
            this.bindEvents();
        }

        morphDropdown.prototype.checkMq = function() {
            //check screen size
            var self = this;
            return window.getComputedStyle(self.element.get(0), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "").split(', ');
        };

        morphDropdown.prototype.bindEvents = function() {
            var self = this;
            //hover over an item in the main navigation
            this.mainNavigationItems.mouseenter(function(event){
                //hover over one of the nav items -> show dropdown
                self.showDropdown($(this));
            }).mouseleave(function(){
                setTimeout(function(){
                    //if not hovering over a nav item or a dropdown -> hide dropdown
                    if( self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) self.hideDropdown();
                }, 50);
            });

            //hover over the dropdown
            this.dropdownList.mouseleave(function(){
                setTimeout(function(){
                    //if not hovering over a dropdown or a nav item -> hide dropdown
                    (self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) && self.hideDropdown();
                }, 50);
            });

            //click on an item in the main navigation -> open a dropdown on a touch device
            this.mainNavigationItems.on('touchstart', function(event){
                var selectedDropdown = self.dropdownList.find('#'+$(this).data('content'));
                if( !self.element.hasClass('is-dropdown-visible') || !selectedDropdown.hasClass('active') ) {
                    event.preventDefault();
                    self.showDropdown($(this));
                }
            });

            //on small screens, open navigation clicking on the menu icon
            this.element.on('click', '.nav-trigger', function(event){
                event.preventDefault();
                self.element.toggleClass('nav-open');
            });
        };

        morphDropdown.prototype.showDropdown = function(item) {
            this.mq = this.checkMq();
            if( this.mq == 'desktop') {
                var self = this;
                var selectedDropdown = this.dropdownList.find('#'+item.data('content')),
                        selectedDropdownHeight = selectedDropdown.innerHeight(),
                        selectedDropdownWidth = selectedDropdown.children('.content').innerWidth(),
                        selectedDropdownLeft = item.offset().left + item.innerWidth()/2 - selectedDropdownWidth/2;

                //update dropdown position and size
                this.updateDropdown(selectedDropdown, parseInt(selectedDropdownHeight), selectedDropdownWidth, parseInt(selectedDropdownLeft));
                //add active class to the proper dropdown item
                this.element.find('.active').removeClass('active');
                selectedDropdown.addClass('active').removeClass('move-left move-right').prevAll().addClass('move-left').end().nextAll().addClass('move-right');
                item.addClass('active');
                //show the dropdown wrapper if not visible yet
                if( !this.element.hasClass('is-dropdown-visible') ) {
                    setTimeout(function(){
                        self.element.addClass('is-dropdown-visible');
                    }, 10);
                }
            }
        };

        morphDropdown.prototype.updateDropdown = function(dropdownItem, height, width, left) {
            this.dropdownList.css({
                '-moz-transform': 'translateX(' + left + 'px)',
                '-webkit-transform': 'translateX(' + left + 'px)',
                '-ms-transform': 'translateX(' + left + 'px)',
                '-o-transform': 'translateX(' + left + 'px)',
                'transform': 'translateX(' + left + 'px)',
                'width': width+'px',
                'height': height+'px'
            });

            this.dropdownBg.css({
                '-moz-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
                '-webkit-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
                '-ms-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
                '-o-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
                'transform': 'scaleX(' + width + ') scaleY(' + height + ')'
            });
        };

        morphDropdown.prototype.hideDropdown = function() {
            this.mq = this.checkMq();
            if( this.mq == 'desktop') {
                this.element.removeClass('is-dropdown-visible').find('.active').removeClass('active').end().find('.move-left').removeClass('move-left').end().find('.move-right').removeClass('move-right');
            }
        };

        morphDropdown.prototype.resetDropdown = function() {
            this.mq = this.checkMq();
            if( this.mq == 'mobile') {
                this.dropdownList.removeAttr('style');
            }
        };

        var morphDropdowns = [];
        if( $('.cd-morph-dropdown').length > 0 ) {
            $('.cd-morph-dropdown').each(function(){
                //create a morphDropdown object for each .cd-morph-dropdown
                morphDropdowns.push(new morphDropdown($(this)));
            });

            var resizing = false;

            //on resize, reset dropdown style property
            updateDropdownPosition();
            $(window).on('resize', function(){
                if( !resizing ) {
                    resizing =  true;
                    (!window.requestAnimationFrame) ? setTimeout(updateDropdownPosition, 300) : window.requestAnimationFrame(updateDropdownPosition);
                }
            });

            function updateDropdownPosition() {
                morphDropdowns.forEach(function(element){
                    element.resetDropdown();
                });

                resizing = false;
            };
        }
    });
</script>
</body>
</html>